@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

body {
	font-family: 'Righteous', sans-serif !important;
	font-size: 15px;
	background: #fff;
	margin: 0 !important;
}

html,
body,
#__nuxt,
#app {
	touch-action: pan-x pan-y;
	/* 只允许单指滚动，禁止双指缩放 */
	overscroll-behavior: contain;
}

html,
body {
	width: 100%;
	overflow-x: hidden;
	/* 防止移动端宽度超出 */
}


img {
	width: 100%;
	height: 100%;
}

a {
	text-decoration: none;
	color: #000;
}

a:hover {
	color: #000;
}

a.no-underline {
	text-decoration: none;
}

image {
	width: 100%;
	height: 100%;
}

input {
	border: none;
}

input:focus {
	outline: none;
	border: none;
}

.w-100 {
	width: 100% !important;
}

.h-100 {
	height: 100%;
}

.w-1200 {
	width: 1200px;
	margin: 0 auto;
}

.w-px {
	width: 1px;
}

.h-4 {
	height: 1rem;
}

/*flex布局*/


.d-f {
	display: flex;
}

.row-ac-jc {
	display: flex;
	align-items: center;
	justify-content: center;
}

.row-af {
	display: flex;
	align-items: flex-end;
}

.row-ac-sb {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.row-ac-sa {
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
}

.row-ac {
	display: flex;
	align-items: center;
}

.row-ab {
	display: flex;
	align-items: baseline;
}

.row-ac-fw {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.row-a-j-fc {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.flex-direction-column {
	flex-direction: column;
}

.row-af-js-fw {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
}

.flex-wrap-wrap {
	flex-wrap: wrap;
}

.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

.justify-between {
	justify-content: space-between;
}

.justify-center {
	justify-content: center;
}

.align-center {
	align-items: center;
}

.align-stretch {
	align-items: stretch;
}

.align-start {
	align-items: flex-start;
}

.align-end {
	align-items: flex-end;
}

.position-fixed {
	position: fixed;
}


.border-none {
	border: none;
}

/*上下左右边距*/
.mt {
	margin-top: 5px;
}

.mt-10 {
	margin-top: 10px;
}

.mt-15 {
	margin-top: 15px;
}

.mt-20 {
	margin-top: 20px;
}

.mt-30 {
	margin-top: 30px;
}

.mt-40 {
	margin-top: 40px;
}

.mt-50 {
	margin-top: 50px;
}

.mt-60 {
	margin-top: 60px;
}

.mt-70 {
	margin-top: 70px;
}

.mt-80 {
	margin-top: 80px;
}

.mt-90 {
	margin-top: 90px;
}

.mb-0 {
	margin-bottom: 0;
}

.mb-10 {
	margin-bottom: 10px;
}

.mb-20 {
	margin-bottom: 20px;
}

.mb-30 {
	margin-bottom: 30px;
}

.mb-40 {
	margin-bottom: 40px;
}

.mb-50 {
	margin-bottom: 50px;
}

.mb-60 {
	margin-bottom: 60px;
}

.mb-70 {
	margin-bottom: 70px;
}

.mb-80 {
	margin-bottom: 80px;
}

.mb-90 {
	margin-bottom: 90px;
}

.ml {
	margin-left: 5px;
}

.ml-0 {
	margin-left: 0;
}

.ml-10 {
	margin-left: 10px;
}

.ml-20 {
	margin-left: 20px;
}

.ml-30 {
	margin-left: 30px;
}

.ml-40 {
	margin-left: 40px;
}

.ml-50 {
	margin-left: 50px;
}

.ml-60 {
	margin-left: 60px;
}

.ml-70 {
	margin-left: 70px;
}

.ml-80 {
	margin-left: 80px;
}

.ml-90 {
	margin-left: 90px;
}


.mr-0 {
	margin-right: 0;
}

.mr {
	margin-right: 5px;
}

.mr-10 {
	margin-right: 10px;
}

.mr-20 {
	margin-right: 20px;
}

.mr-30 {
	margin-right: 30px;
}

.mr-40 {
	margin-right: 40px;
}

.mr-50 {
	margin-right: 50px;
}

.mr-60 {
	margin-right: 60px;
}

.mr-70 {
	margin-right: 70px;
}

.mr-80 {
	margin-right: 80px;
}

.mr-90 {
	margin-right: 90px;
}

.mx {
	margin-left: 5px;
	margin-right: 5px;
}

.mx-0 {
	margin-left: 0px;
	margin-right: 0px;
}

.mx-10 {
	margin-left: 10px;
	margin-right: 10px;
}

.mx-15 {
	margin-left: 15px;
	margin-right: 15px;
}

.mx-20 {
	margin-left: 20px;
	margin-right: 20px;
}

.mx-25 {
	margin-left: 25px;
	margin-right: 25px;
}

.mx-30 {
	margin-left: 30px;
	margin-right: 30px;
}

.mx-40 {
	margin-left: 40px;
	margin-right: 40px;
}

.mx-50 {
	margin-left: 50px;
	margin-right: 50px;
}

.mx-60 {
	margin-left: 60px;
	margin-right: 60px;
}

.mx-70 {
	margin-left: 70px;
	margin-right: 70px;
}

.mx-80 {
	margin-left: 80px;
	margin-right: 80px;
}

.mx-90 {
	margin-left: 90px;
	margin-right: 90px;
}

.my {
	margin-top: 5px;
	margin-bottom: 5px;
}

.my-0 {
	margin-top: 0px;
	margin-bottom: 0px;
}

.my-10 {
	margin-top: 10px;
	margin-bottom: 10px;
}

.my-20 {
	margin-top: 20px;
	margin-bottom: 20px;
}

.my-30 {
	margin-top: 30px;
	margin-bottom: 30px;
}

.my-40 {
	margin-top: 40px;
	margin-bottom: 40px;
}

.my-50 {
	margin-top: 50px;
	margin-bottom: 50px;
}

.p-0 {
	padding: 0;
}

.p {
	padding: 5px;
}

.p-10 {
	padding: 10px;
}

.p-20 {
	padding: 20px;
}

.p-30 {
	padding: 30px;
}

.p-40 {
	padding: 40px;
}

.p-50 {
	padding: 50px;
}

.p-60 {
	padding: 60px;
}

.p-70 {
	padding: 70px;
}

.p-80 {
	padding: 80px;
}

.p-90 {
	padding: 90px;
}

.pt-0 {
	padding-top: 0;
}

.pt {
	padding-top: 5px;
}

.pt-10 {
	padding-top: 10px;
}

.pt-20 {
	padding-top: 20px;
}

.pt-30 {
	padding-top: 30px;
}

.pt-40 {
	padding-top: 40px;
}

.pt-50 {
	padding-top: 50px;
}

.pb-0 {
	padding-bottom: 0;
}

.pb-10 {
	padding-bottom: 10px;
}

.pb {
	padding-bottom: 5px;
}

.pb-20 {
	padding-bottom: 20px;
}

.pb-30 {
	padding-bottom: 30px;
}

.pb-40 {
	padding-bottom: 40px;
}

.pb-50 {
	padding-bottom: 50px;
}

.pb-60 {
	padding-bottom: 60px;
}

.pb-70 {
	padding-bottom: 70px;
}

.pb-80 {
	padding-bottom: 80px;
}

.pb-90 {
	padding-bottom: 90px;
}

.pl-0 {
	padding-left: 0;
}

.pl {
	padding-left: 5px;
}

.pl-10 {
	padding-left: 10px;
}

.pl-20 {
	padding-left: 20px;
}

.pl-30 {
	padding-left: 30px;
}

.pl-40 {
	padding-left: 40px;
}

.pl-50 {
	padding-left: 50px;
}

.pr-0 {
	padding-right: 0;
}

.pr {
	padding-right: 5px;
}

.pr-10 {
	padding-right: 10px;
}

.pr-20 {
	padding-right: 20px;
}

.pr-30 {
	padding-right: 30px;
}

.pr-40 {
	padding-right: 40px;
}

.pr-50 {
	padding-right: 50px;
}

.py-0 {
	padding-top: 0;
	padding-bottom: 0;
}

.py {
	padding-top: 5px;
	padding-bottom: 5px;
}

.py-10 {
	padding-top: 10px;
	padding-bottom: 10px;
}

.py-15 {
	padding-top: 15px;
	padding-bottom: 15px;
}

.py-20 {
	padding-top: 20px;
	padding-bottom: 20px;
}

.py-30 {
	padding-top: 30px;
	padding-bottom: 30px;
}

.py-40 {
	padding-top: 40px;
	padding-bottom: 40px;
}

.py-50 {
	padding-top: 50px;
	padding-bottom: 50px;
}

.px-0 {
	padding-left: 0;
	padding-right: 0;
}

.px-10 {
	padding-left: 10px;
	padding-right: 10px;
}

.px {
	padding-left: 5px;
	padding-right: 5px;
}

.px-20 {
	padding-left: 20px;
	padding-right: 20px;
}

.px-30 {
	padding-left: 30px;
	padding-right: 30px;
}

.px-40 {
	padding-left: 40px;
	padding-right: 40px;
}

.px-50 {
	padding-left: 50px;
	padding-right: 50px;
}

.border-red {
	border: 1px #999 solid;
}

.border {
	border-width: 1px;
	border-style: solid;
	border-color: rgba(229 230 235, 1);
}

.border-top {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: rgba(229 230 235, 1);
}

.border-bottom {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgba(229 230 235, 1);
}

.border-bottom-dashed {
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: rgba(229 230 235, 1);
}

.border-right {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: rgba(229 230 235, 1);
}

.border-bottom-main {
	border-bottom-color: #f83434;
}

.flex-row {
	flex-direction: row !important;
}

.flex-column {
	flex-direction: column !important;
}

.flex-row-reverse {
	flex-direction: row-reverse !important;
}

.flex-column-reverse {
	flex-direction: column-reverse !important;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-nowrap {
	flex-wrap: nowrap;
}

.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

.justify-between {
	justify-content: space-between;
}

.justify-center {
	justify-content: center;
}

.align-center {
	align-items: center;
}

.align-stretch {
	align-items: stretch;
}

.align-start {
	align-items: flex-start;
}

.align-end {
	align-items: flex-end;
}

.position-fixed {
	position: fixed;
}

.text-center {
	text-align: center;
}

.flex-1 {
	flex: 1;
}

.flex-2 {
	flex: 2;
}

.flex-3 {
	flex: 3;
}

.flex-4 {
	flex: 4;
}

.flex-5 {
	flex: 5;
}

/* scroll-view 要用到的两个属性*/
.scroll-row {
	width: 100%;
	white-space: nowrap;
}

.scroll-row-item {
	display: inline-block !important;
}


/* 文字颜色 */
.text-main-color {
	color: #8C8C8C;
}

.text-white {
	color: #ffffff;
}

.text-grey {
	color: #6F6F6F;
}

.text-light-grey {
	color: #828282;
}

.text-primary {
	color: #007bff;
}

.text-hover-primary {
	color: #0056b3;
}

.text-secondary {
	color: #6c757d;
}

.text-hover-secondary {
	color: #494f54;
}

.text-success {
	color: #28a745;
}

.text-hover-success {
	color: #19692c;
}

.text-info {
	color: #17a2b8;
}

.text-hover-info {
	color: #0f6674;
}

.text-warning {
	color: #ffc107;
}

.text-hover-warning {
	color: #ba8b00;
}

.text-danger {
	color: #dc3545;
}

.text-hover-danger {
	color: #a71d2a;
}

.text-light {
	color: #f8f9fa;
}

.text-hover-light {
	color: #cbd3da;
}

.text-dark {
	color: #343a40;
}

.text-hover-dark {
	color: #121416;
}

.text-body {
	color: #212529;
}

.text-muted {
	color: #6c757d;
}

.text-light-muted {
	color: #A9A5A0;
}

/* 浅灰色用在input里公共色 */
.text-light-black {
	color: rgba(0, 0, 0, 0.5);
}

.text-light-white {
	color: rgba(255, 255, 255, 0.5);
}

.text-price {
	color: #F12201;
}

.text-black {
	color: #000;
}

.text-de {
	text-decoration: line-through;
}

.border-color {
	border: 1rpx solid #ffa722;
	color: #ffa722;
}

/* 背景颜色 */

.bg-border {
	background-color: rgba(228, 228, 231, 1);
}

.bg-color {
	background-color: #E42F04 !important;
}

.bg-main-color {
	background-color: #0F0F0F !important;
}

.bg-main-muted {
	background-color: #F4F4F7;
}

.bg-disabled-color {
	background-color: #ff5c5c !important;
	color: #FFFFFF !important;
}

.bg-primary {
	background-color: #007bff !important;
	color: #FFFFFF !important;
}

.bg-hover-primary:hover {
	background-color: #0062cc;
}

.bg-secondary {
	background-color: #6c757d;
}

.bg-hover-secondary:hover {
	background-color: #545b62;
}

.bg-success {
	background-color: #28a745;
	color: #FFFFFF;
}

.bg-hover-success {
	background-color: #1e7e34;
}

.bg-info {
	background-color: #17a2b8;
}

.bg-hover-info {
	background-color: #117a8b;
}

.bg-warning {
	background-color: #ffc107;
	color: #FFFFFF;
}

.bg-hover-warning {
	background-color: #d39e00;
}

.bg-danger {
	background-color: #dc3545;
	color: #FFFFFF;
}

.bg-hover-danger {
	background-color: #bd2130;
	color: #FFFFFF;
}

.bg-light {
	background-color: #f8f9fa;
}

.bg-hover-light {
	background-color: #dae0e5;
}

.bg-dark {
	background-color: #343a40;
	color: #FFFFFF;
}

.bg-hover-dark {
	background-color: #1d2124;
}

.bg-white {
	background-color: #ffffff;
}

.bg-button {
	background-color: #f5f4f4;
}

.bg-transparent {
	background-color: transparent;
}

.bg-muted {
	background-color: #6c757d;
}

.bg-light-muted {
	background-color: #A9A5A0;
}

.top-0 {
	top: 0;
}

.left-0 {
	left: 0;
}

.right-0 {
	right: 0;
}

.bottom-0 {
	bottom: 0;
}


.font-s-12 {
	font-size: 12px;
}

.font-s-13 {
	font-size: 13px;
}

.font-s-14 {
	font-size: 14px;
}

.font-s-15 {
	font-size: 15px;
}

.font-s-16 {
	font-size: 16px;
}

.font-s-17 {
	font-size: 17px;
}

.font-s-18 {
	font-size: 18px;
}

.font-s-19 {
	font-size: 19px;
}

.font-s-20 {
	font-size: 20px;
}

.font-s-21 {
	font-size: 21px;
}

.font-s-22 {
	font-size: 22px;
}

.font-s-23 {
	font-size: 23px;
}

.font-s-24 {
	font-size: 24px;
}

.font-s-25 {
	font-size: 25px;
}

.font-s-26 {
	font-size: 26px;
}

.font-s-27 {
	font-size: 27px;
}

.font-s-28 {
	font-size: 28px;
}

.font-s-29 {
	font-size: 29px;
}

.font-s-30 {
	font-size: 30px;
}

.font-s-31 {
	font-size: 31px;
}

.font-s-32 {
	font-size: 32px;
}

.font-s-33 {
	font-size: 33px;
}

.font-s-34 {
	font-size: 34px;
}

.font-s-35 {
	font-size: 35px;
}

.font-s-36 {
	font-size: 36px;
}

.font-w {
	/*超粗字体 */
	font-weight: bold;
}

.font-w-300 {
	/*细黑字体 */
	font-weight: 300;
}

.font-w-400 {
	/*细黑字体 */
	font-weight: 400;
}

.font-w-500 {
	/*细黑字体 */
	font-weight: 500;
}

.font-w-600 {
	/*细黑字体 */
	font-weight: 600;
}

/*字体粗细*/

/* 定位 - 固定顶部 */
.fixed-top {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 9;
}

/* 定位 - 固定底部 */
.fixed-bottom {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}

.position-relative {
	position: relative;
}

.position-absolute {
	position: absolute;
}

/* 圆角 */
.rounded-2 {
	border-radius: 2px;
}

.rounded-4 {
	border-radius: 4px;
}

.rounded-6 {
	border-radius: 6px;
}

.rounded-8 {
	border-radius: 8px;
}

.rounded-10 {
	border-radius: 10px;
}

.rounded-top {
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

.rounded-right {
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
}

.rounded-bottom {
	border-bottom-right-radius: 12px;
	border-bottom-left-radius: 12px;
}

.rounded-left {
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
}

.rounded-circle {
	border-radius: 100px;
}

.rounded-50 {
	border-radius: 50%;
}

/* 内容溢出 */
.overflow-hidden {
	overflow: hidden;
}

/* 上三角 */
.triangle-up {
	width: 0;
	height: 0;
	border-left: 12rpx solid transparent;
	border-right: 12rpx solid transparent;
	border-bottom: 12rpx solid #f61f1b;
}

/* 下三角 */
.triangle-down {
	width: 0;
	height: 0;
	border-left: 12rpx solid transparent;
	border-right: 12rpx solid transparent;
	border-top: 12rpx solid #f61f1b;
}

/* 两行限制 */
.in1line {
	display: -webkit-box !important;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 1;
}

.in2line {
	display: -webkit-box !important;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2;
}

.in3line {
	display: -webkit-box !important;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 3;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.clearfix {
	zoom: 1;
}

.clearfix:after {
	content: '';
	height: 0;
	display: block;
	clear: both;
}


/* 隐藏 scroll-view 组件的滚动条*/
::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}

.no-goods-img {
	font-size: 24px;
	color: #333333;
}

.no-goods-img image {
	display: block;
	margin: 20rpx auto;
	width: 450px;
	height: 383rpx
}

.cursor-pointer {
	cursor: pointer;
	text-decoration: none;
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99;
	background-color: rgba(0, 0, 0, 0.18);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: visibility 0.3s, opacity 0.3s;
}

.login-modal {
	width: 260px;
	padding: 20px;
	border-radius: 2px;
	background-color: #ffffff;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
	z-index: 999;
}

.plan-modal {
	width: 420px;
	padding: 10px;
	border-radius: 2px;
	background-color: #ffffff;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
	z-index: 999;
}

.add-modal {
	width: 650px;
	padding: 30px;
	border-radius: 6px;
	background-color: #ffffff;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	z-index: 999;
}

.del-modal {
	width: 260px;
	height: 160px;
	background-color: #ffffff;
	padding: 20px;
	border-radius: 2px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	z-index: 999;
}